<template>
    <div class="visitorbox">
        <div class="navigation">
            <el-input v-model="datauser.idorname" placeholder="请输入访客名称" />
            <el-input v-model="datauser.mobile" placeholder="请输入手机号" />
            <el-select v-model="datauser.type" class="m-2" placeholder="请选择人员类型" size="large">
                <el-option
                v-for="item in types"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
            </el-select>
            <el-select v-model="datauser.healthcode" class="m-2" placeholder="是否离校" size="large">
                <el-option
                v-for="item in types2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
            </el-select>
            <el-select v-model="datauser.status" class="m-2" placeholder="请选择审核状态" size="large">
                <el-option
                v-for="item in types3"
                :key="item.value"   
                :label="item.label"
                :value="item.value"
                />
            </el-select>
            <el-cascader
              v-model="value"
              :options="options"
              :props="props"
              @change="handleChange"
                            />              
            <el-date-picker
                v-model="datauser.starttime"
                type="datetime"
                placeholder="进校时间"
                value-format="YYYY-MM-DD HH:mm:ss"
                :default-time="defaultTime"
            />
            <el-date-picker
                v-model="datauser.endtime"
                type="datetime"
                placeholder="离校时间"
                value-format="YYYY-MM-DD HH:mm:ss"
                :default-time="defaultTime"
            />
            <el-button type="primary" @click="updata">查询</el-button>
            <el-button type="success" @click="addition">添加</el-button>
            <el-button type="info">批量导出</el-button>
            <el-button type="warning">批量导入</el-button>
        </div>
        <div class="frombox">
            <froms :tableData="datas.tableData" :tableHeader="tableHeader" @particulars="particulars" />
            <div class="table">
              <tables :currentPage="datauser.page" :pageSize="datauser.pageSize" :totalNum="total" @changePageSize="changePageSize" @changePage="changePage" />
            </div>
           
        </div>
       
    </div>
</template>

<script setup lang="ts">
import { ref,reactive,onMounted } from 'vue';
import { getList } from '../../api/admin3';
import froms from '../../components/from/from.vue'
import {getdepartment}  from '../../api/admin3';
import { useRouter } from 'vue-router';
import tables from '../../components/table/paging.vue'
const router = useRouter();
interface user{
    page:number,
    pageSize:number,
    idorname:string,
    mobile:string,
    card:string,
    carnumber:string,
    starttime:string,
    endtime:string,
    department:string,
    status:string,
    type:string,
    healthcode:string
}
const datauser=reactive<user>({
    page:1,
    pageSize:10,      
    idorname:'',
    mobile:'',
    card:'',
    carnumber:'',
    starttime:'',
    endtime:'',
    department:'',
    status:'',
    type:'',
    healthcode:''
})
let list:Array<any>=reactive([])
let total=ref<any>()

const tableHeader=ref<Array<any>>([
        {
            label:'用户名',
            prop:'username'
        },
        {
            label:'手机号',
            prop:'mobile'
        },
        {
            label:'部门',
            prop:'department'
        },
        {
            label:'进校时间',
            prop:'starttime'
        },
        {
            label:'离校时间',
            prop:'endtime'
        },
        {
            label:'人员类型',
            prop:'reason'
        },
        {
            label:'状态',
            prop:'status',
            type:'types'
        },
        {
            label:'是否离校',
            prop:'type',
            type:'leave'
        },
        {
        label:'操作',
        type:'button',
        buttons:[
            {
                text: '详情',
                event: 'particulars',
                type: 'info',
                show: true,
            },
        ]
        }
    ])

let datas:any=reactive({
    tableData:[

    ]
})
const getData = async () => {
  const res: any = await getList(datauser);
 
    console.log(res,'列表数据')
   if(res.code==10000){
      datas.tableData=res.data.findvisiuser.list
      total=res.data.findvisiuser.total
      // console.log(datas.tableData)
   }
 
}

const particulars=(val:any)=>{
  console.log(val)
  router.push({
    path: '/visitor-particulars',
    query: {
      userlist: JSON.stringify(val)
    }
  })
}

const addition=()=>{
  router.push({
    path:'/visitor-add'
  })
}

const changePageSize=(val:any)=>{
  datauser.pageSize=val
  getData()
  // console.log(val)
}
const changePage=(val:any)=>{
  datauser.page=val
  getData()
  // console.log(val)
}
let options :any= reactive([])
const getdep= async()=>{
    let res:any=await getdepartment()
    console.log(res)
    if(res.code==10000){
        Object.assign(options, res.data[0].son); 
        console.log(8888,options)
    }

}

const updata=()=>{
  datauser.page=1
  datauser.pageSize=10
  getData()
}

onMounted(() => {
  getData(),
  getdep()
})





const value3 = ref('')
const defaultTime = new Date(2000, 1, 1, 12, 0, 0)
const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]


const value = ref('')

const props ={
  value:'id',
  label:'name',
  children:'son'
}

const handleChange = (value:any) => {
    let res= value.length-1
    console.log(value)
    console.log(value[res])

    datauser.department=value[res]
}

const types = [
  {
    value: '0',
    label: '外来人员',
  },
  {
    value: '1',
    label: '老师',
  },
  {
    value: '2',
    label: '学生',
  },
]
const types2=[
  {
    value:'0',
    label:'未离校'
  },
  {
    value:'1',
    label:'已离校'
  },
]
const types3=[
  {
    value:'0',
    label:'已取消'
  },
  {
    value:'1',
    label:'待初审'
  },
  {
    value:'3',
    label:'初审拒绝'
  },
  {
    value:'4',
    label:'待二审'
  },
  {
    value:'5',
    label:'二审拒绝'
  },
  {
    value:'6',
    label:'待终审'
  },
  {
    value:'7',
    label:'终审通过'
  },
  {
    value:'8',
    label:'终审拒绝'
  },
]
</script>

<style scoped lang="less">
.visitorbox{
    width: 100%;  
    height: 100%;
    // background-color: antiquewhite;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    .navigation{
     
        width: 1700px;
        // background-color: saddlebrown;
        display: flex;
        // justify-content: space-between;
        flex-wrap: wrap;
    }
}
.frombox{
    width: 1700px;
    margin-top: 30px;
}
:deep(.el-input){
    height: 24px !important;
    width: 180px !important; 
    margin-right: 10px;
    margin-top: 20px;
}
// :deep(.el-input__wrapper){
//     height: 24px;
//     width: 100px;
// }
// :deep(.el-input__inner){
//     height: 24px;
//     width: 250px;
// }
.example-basic .el-date-editor {
  margin: 8px;
}
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-datetime-picker .block:last-child {
  border-right: none;
}
.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.el-button {
    height: 24px;
    margin-top: 20px;
}
.table{

 width: 100%;
 display: flex;
 flex-direction: row-reverse;

  // background-color: rebeccapurple;
  margin-top: 20px;

  
}

</style>